<script setup>
import { tool } from "../tool/index"
import search from "../components/Search/searchBlog.vue"
import { onMounted, reactive, ref } from "vue"
const ArticleName = "article"
const CategoryName = "category"
const props = defineProps(['id'])
const limit = ref(20)
const count = ref()
const weekCount = ref()
const title = ref()
const blog = reactive({
  limit: limit,
  OpLike: false,
  key: ["category"],
  value: [`${props.id}`],
  Or: false
})
async function SearchBlogCount(path, date) {
  try {
    const data = {
      key: "Search",
      data: date
    }
    const counts = await tool.axiosApi(path, data, "get")
    if (path == ArticleName)
      return counts.count
    return counts.data[0].name
  } catch (error) {

  }
}
// 辅助函数：将日期格式化为 'yyyy-mm-dd'
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
}
async function onData() {
  try {
    const currentDate = new Date()
    const pastDate = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000)
    count.value = await SearchBlogCount(ArticleName, {
      key: ["category"],
      value: [`${props.id}`]
    })
    weekCount.value = await SearchBlogCount(ArticleName, {
      key: ["category", "created_at"],
      value: [`${props.id}`, ["time", `${formatDate(pastDate)}`, `${formatDate(currentDate)}`]]
    })
    title.value = await SearchBlogCount(CategoryName, {
      key: ["id"],
      value: [`${props.id}`]
    })
  } catch (error) {

  }
}
onMounted(async () => {
  try {
    await onData()
    window.scrollTo(0, 0)
  } catch (error) {

  }
})
</script>

<template>
  <div class="category_body">
    <div class="title">{{ title }}</div>
    <div class="count">
      <el-space :size="size" alignment="align-items	" spacer="|">
        <el-button> 文章总数量: {{ count }} </el-button>
        <el-button> 过去七天发布: {{ weekCount }} </el-button>
      </el-space>
    </div>
  </div>
  <search :blog="blog"></search>
</template>
<style scoped >
.category_body {
  padding: 20px;
  background-color: white;
}

.category_body .title {
  text-align: center;
  font-size: 50px;
}

.category_body .count {
  text-align: center;
}

.category_body .el-button {
  width: 200px;
}</style>